<template>
  <div class="wrapper">
    <button @click="guide">使用Driver.js引导用户</button>
    <div class="step-list">
      <div id="step1">
        <h1>第一步</h1>
      </div>
      <div id="step2">
        <h1>第二步</h1>
      </div>
      <div id="step3">
        <h1>第三步</h1>
      </div>
    </div>
  </div>
</template>

<script>
import Driver from "driver.js"; // import driver.js
import "driver.js/dist/driver.min.css"; // import driver.js css

const steps = [
  {
    element: "#step1",
    popover: {
      title: "第一步",
      description: "描述描述描述描述描述描述",
      position: "bottom",
    },
  },
  {
    element: "#step2",
    popover: {
      title: "第二步",
      description: "描述描述描述描述描述描述",
      position: "bottom",
    },
  },
  {
    element: "#step3",
    popover: {
      title: "第三步",
      description: "描述描述描述描述描述描述",
      position: "bottom",
    },
  },
];
export default {
  name: "DriverDemo",
  components: {},
  props: {},
  data() {
    return {
      driver: null,
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleCopy() {},
    guide() {
      // 定义步骤
      this.driver.defineSteps(steps);
      // 开始引导
      this.driver.start();
    },
  },
  created() {},
  mounted() {
    // 初始化driver
    this.driver = new Driver({
      animate: true,
      opacity: 0.5,
      allowClose: false,
      doneBtnText: "完成",
      closeBtnText: "关闭",
      nextBtnText: "下一步",
      prevBtnText: "上一步",
    });
  },
};
</script>
<style scoped>
.wrapper {
}

.step-list {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 12px;
}

.step-list > div {
  width: 100px;
  height: 40px;
  background-color: #ccc;
  border-radius: 8px;
  display: flex;
  padding: 6px;
  justify-content: center;
  align-items: center;
}
</style>
